<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



    <!--    引入首页样式-->
    <link href="../admin/favicon.ico" rel="shortcut icon"/>
    <link href="../../indexCss.css" rel="stylesheet" type="text/css">
    <style>
        body {

            position: relative;
            color: rgba(0, 0, 0, 0.68)
        }

        a {
            color: rgba(0, 0, 0, 0.68);
            cursor: pointer; /*加手图标*/
            text-decoration: none;
        }

        a:hover {
            color: rgba(36, 81, 126, 0.68);
        }

        #topdiv > div {
            margin: 60px 0;

        }

        #div-bot {
            position: relative;
            bottom: 5px;
        }



    </style>
    <!--    引入首页样式-->
    <link href="../admin/indexCss.css" rel="stylesheet" type="text/css">
    <!-- import CSS -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <link href="elment.css" rel="stylesheet">
    <script src="main.js"></script>
</head>
<body>


<!--动态背景画布-->
<!--删除弹窗-->
<!--<canvas id="canvas" style="height: 100%;z-index: -111;"></canvas>-->
<header class=" navbar-fixed-top " id="h-new">
    <header-new v-bind:u="u"></header-new>
</header>


<section>



    <div class="container">

        <div class="container" id="topdiv">
            <div class="row clearfix">
                <div class="col-md-1"></div>
                <div class="col-md-10 " id="ddd" style="padding: 0;position: relative;">
                    <!--瀑布流开始-->
                    <div class="grid">
                        <div class="grid-item col-md-12">
                            <div class="thumbnail" style="height: 850px;">
                                <div style="width: 10%;"></div>
                                <div style="overflow: hidden;width: 80%;height: 450px;text-align:center;">
<!--                                    轮播图开始-->
                                    <template>
                                        <el-carousel :interval="3000" height="430px" type="card">
                                            <el-carousel-item>
                                                <img :src="com.url" alt="" style="height: 420px;">
                                            </el-carousel-item>
                                            <el-carousel-item :key="item" v-for="item in com.urls">
                                                <img :src="item" alt="" style="height: 420px;">
                                            </el-carousel-item>
                                        </el-carousel>
                                    </template>

                                    <!--                                    轮播图结束-->
<!--                                    <img :src="com.url" alt="暂无商品图" style="height: 440px;">&lt;!&ndash;width: 400px;&ndash;&gt;-->
                                </div>

                                <div class="caption">
                                    <div style="height: 260px; margin-bottom: 10px">
                                        <h3 v-text="com.name"></h3>
                                        <div style="height: 150px;overflow: hidden">
                                            <p v-text="com.intro"></p>
                                        </div>
                                        <div class="progress progress-striped active" style="color: #333333">
                                            <div :style="'width:' +(((com.salesnum)/com.sum)*100) +'%;'"
                                                 class="progress-bar progress-bar-danger"
                                                 role="progressbar">
                                            </div>
                                        </div>
                                        <div>

                                        </div>
                                        <div>

                                        </div>
                                        <span>已售<b>{{com.salesnum}}</b>件</span>&nbsp;&nbsp;
                                        <a href="javascript:0" style="color:#4586f5;font-weight: 600;"><i aria-hidden="true" class="fa fa-comments-o"></i>客服</a><br>
                                        <span><b>{{com.paynum}}</b>人购买过</span>
                                        <span style="float: right">仅剩<b>{{com.sum - com.salesnum}}</b>件</span><br>
                                        <span style="float: right">浏览量:<b>{{com.shownum}}</b>次</span><br>
                                        <b style=" color: #F1393A;font-size: 35px;font-weight: 1000;">
                                            <i aria-hidden="true" class="fa fa-jpy"></i>{{com.price}}</b>
                                    </div>
                                </div>
                                    <div class="col-md-12" id="div-bot" style="padding-top: 20px;: ">
                                        <p>
                                            <button @click="shopping(com.id)" class="btn btn-danger btn-sm"
                                                    style="float: right;border-radius: 10px" type="button">
                                                <i aria-hidden="true" class="fa fa-cart-arrow-down fa-lg"></i> 去抢购
                                            </button>
                                            <button @click="shopOne(com.id)" class="btn btn-success btn-sm"
                                                    style="float: right;margin-right:8px;border-radius: 10px"
                                                    type="button">
                                                <i aria-hidden="true" class="fa fa-cart-plus fa-lg"></i> 加入购物车
                                            </button>
                                        </p>
                                    </div>


                            </div>
                        </div>

                    </div>


<!--                    //添加评论开始-->
                    <div class="col-md-12">
                        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);background-color: rgba(243,240,240,0.72)">
                            <p class="text-left text-dark">
                                <a :href="'#addComment1'" aria-controls="collapseExample" aria-expanded="false"
                                    class="text-white" data-toggle="collapse">
                                    <el-button icon="el-icon-edit" plain type="primary">写一个</el-button>
                                </a>
                            </p>

                            <div class="collapse" id="addComment1" >
                                <div class="card card-body border-light">
                                    <form class="needs-validation" enctype="multipart/form-data" id="fromaddcom">
                                        <div class="form-group" >
                                            <div>
                                                <label>添加图片</label>
                                                <input name="url" required type="file">
                                                <label>选择星级</label>
                                                <el-rate
                                                        show-text
                                                        v-model="value">
                                                </el-rate>
                                            </div>
                                            <el-input
                                                    autosize
                                                    maxlength="100"
                                                    placeholder="请输入标题"
                                                    show-word-limit
                                                    type="textarea"
                                                    v-model="til">
                                            </el-input>
                                            <div class="invalid-feedback" style="color: #f34c4c" v-show="til==''">
                                                评论标题不能为空！
                                            </div>
                                            <div style="margin: 20px 0;"></div>
                                            <el-input
                                                    :autosize="{ minRows: 2, maxRows: 4}"
                                                    maxlength="500"
                                                    placeholder="请输入内容"
                                                    show-word-limit
                                                    type="textarea"
                                                    v-model="con">
                                            </el-input>
                                            <div class="invalid-feedback" style="color: #f34c4c" v-show="con==''">
                                                评论内容不能为空！
                                            </div>
                                            <button @click="postComment(id)" class="btn btn-primary my-1 float-right">提交评论</button>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                        </div>
<!--全部评论开始-->
                    <div class="card-footer" style="color: black;border: 0.5px #ddeaf5">
                        <p class="text-success fa fa-comment" style="font-size: 20px"><span v-text="comment.length">1</span>条评论</p>
                        <ul class="list-unstyled mt-3">
                            <li class="media my-2" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px" v-for="(comm,index) in comment">
                                <el-card shadow="hover">
                                <div class="media-body" style="position:relative;">
                                    <el-col :span="24">

                                        <span STYLE="color: #007ffe;margin-right:20px;float:right;font-size: 15px"><i>{{comm.good}}</i>
                                        <a @click="no" ><i aria-hidden="true" class="fa fa-thumbs-o-up fa-lg"></i></a>
                                    </span>
                                        <span  STYLE="color: #007ffe;float:right;right: 5px;font-size: 15px"><i>{{comm.no}}</i>
                                        <a @click="no"><i aria-hidden="true" class="fa fa-thumbs-o-down fa-lg"></i></a>
                                    </span>
                                        <div class="demo-basic--circle">
                                            <el-avatar style="float:left;margin-right: 15px;"><img  :src="comm.userurl" alt=""></el-avatar>
                                            <span  class="mt-0 mb-1"><span style="float:left;font-size: 20px" v-text="comm.usernick+': '">李四</span>
                                            <el-rate :value="comm.level"
                                                    disabled="true"
                                                    show-text
                                                    style="float:left;"
                                                    text-color="#F87B17AD">
                                            </el-rate>
                                            </span>
                                        </div>
                                        <div style="height: 50px;width: 100%"></div>


                                    </span>
                                        <el-col :span="24">
                                            <el-col :span="24">
                                                <b style="font-size: 20px" v-text="comm.title"></b><br>
                                            </el-col>
                                            <el-col :span="5">
                                                <img :src="comm.url" alt="" style="height: 100px"><br>
                                            </el-col>
                                            <el-col :span="19">
                                                <span class="text-monospace" v-text="comm.content">
                                                  评论内容
                                                </span>
                                            </el-col>
                                        </el-col>

                                    </el-col>
                                    <p class="text-dark" style="border: 1px black">

<!--                                    评论修改和删除功能-->
<!--                                        <span class="font-weight-light text-info"-->
<!--                                              style="font-size: small"></span>-->
<!--                                        <a class="text-primary ml-2"-->
<!--                                           style="font-size: small" data-toggle="collapse"-->
<!--                                           :href="'#updateComment'+comm.comid"-->
<!--                                           role="button" aria-expanded="false" aria-controls="collapseExample">-->
<!--                                            <i class="fa fa-edit"></i>编辑-->
<!--                                        </a>-->
<!--                                        &lt;!&ndash;老师角色或者属于本用户的评论可以删除该评论&ndash;&gt;-->
<!--                                        <a class="ml-2  fa fa-close " style="font-size: small"-->
<!--                                           data-toggle="collapse"  role="button"-->
<!--                                           aria-expanded="false" aria-controls="collapseExample"-->
<!--                                           onclick="$(this).next().toggle(300)">-->
<!--                                            删除-->
<!--                                        </a>-->
<!--                                        <a class="badge badge-pill badge-danger text-white" style="display: none;cursor: pointer"-->
<!--                                           @click="no">-->
<!--                                            <i class="fa fa-close"></i>-->
<!--                                        </a>-->

                                    </p>
                                    <div :id="'updateComment'+comm.comid" class="collapse">
                                        <div class="card card-body border-light">
                                            <form class="needs-validation" enctype="multipart/form-data" id="fromupcom" method="post">
                                                <div class="form-group">
                                  <textarea class="form-control"
                                            id="textareaComment1" name="content" required
                                            rows="4"
                                            v-text="comm.content"></textarea>
                                                    <div class="invalid-feedback">
                                                        内容不能为空！
                                                    </div>
                                                </div>
                                                <a @click="updateComment(comm.id)" class="btn btn-primary my-1 float-right" type="submit">提交修改</a>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                </el-card>
                            </li>

                        </ul>

                    </div>
                    </div>
                <!--                                    //商品评论结束-->
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </div>
</section>
<!--正文在这里继续-->

<!--<myfooter></myfooter>-->
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--导入弹窗组件-->
<script src=" https://unpkg.com/sweetalert/dist/sweetalert.min.js "></script>
<!--引入vue和axios-->
<script src="http://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!--引入footer-->
<!--<script src="adminjs/footer.js"></script>-->
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>

    let section_v = new Vue({
        el: "body>section",
        data: {
            value:5,
            userid: 0,
            cls: [], //商品类集合
            com: [], //商品集合
            rcls: [], //资讯类集合
            rep: [], //资讯集合
            comment: [], //资讯集合
            til: "", //评论标题
            con: "", //评论内容
            id: 0, //评论内容
            size:0
            // //绑定所要展示的商品信息属性

        },
        created: function () {
            axios.post("/admin/selectToClass").then(function (response) {
                section_v.cls = response.data;
            })
            let id = location.search.split("=")[1]

            //商品查看加一
            axios.post("/admin/ShownumAdd/"+id).then(function (response) {
                section_v.id = id;
                if (response.data=="ok"){
                    console.log("show+1")
                }else {
                    console.log("no")
                }
            })
            axios.get("/admin/commentSelectById?comid="+id).then(function (response) {
                section_v.comment = response.data;
            })
                axios.post("/admin/commoditySelectById?id="+id).then(function (response) {
                    section_v.com = response.data;
                    section_v.size = response.data.urls.length
                })
            axios.get("/mall/getUser").then(function (response) {
                section_v.userid = response.data.userid;
            })



        },
        methods: {
            shopOne: function (comid) {
                if (section_v.userid != 0 && section_v.userid != null) {
                    axios.get("/shop/insertToShopcar?uid=" + section_v.userid + "&comid=" + comid).then(function (response) {
                        if (response.data == "ok") {
                            swal("","加入成功!", "success")
                            return;
                        }
                        swal("",response.data, "success")
                    }) } else {
                    swal("您还没登录啊", "请先登录哦!", "error", {
                        button: "现在去",
                    }).then((value) => {
                        if (value == true) {
                            location.href = "/login.html";
                        }
                    })
                }
            },
            shopping: function (id) {
                if (section_v.userid != 0 && section_v.userid != null) {
                    let num = prompt("请输入您要购买的数量!")
                    if (num > 0) {
                        axios.get("/shopping/pay?id=" + id + "&num=" + num).then(function (response) {
                            swal("",response.data, "success").then((value => location.reload()))
                        })
                        return;
                    }
                } else {
                    swal("您还没登录啊", "请先登录哦!", "error", {
                        button: "现在去",
                    }).then((value) => {
                        if (value == true) {
                            location.href = "/login.html";
                        }
                    })
                }
            },
            //     openwin:function() {
            //
            // window.open ("/index.html", "newwindow", "height=500, width=600, toolbar=no," +
            //     " menubar=no, scrollbars=no, resizable=no, location=no, status=no")
            //         window.pageXOffset(600)
            //         window.pageYOffset=600
            // }
            no:function (){
                swal("","我没做这个功能哦!","warning")
            },
            postComment:function (id){
                let data = new FormData(document.getElementById("fromaddcom"));
                swal("假装评论添加成功了!","待会做! 这个商品id为: "+id+"内容为:"+data.get("title")+"::"+data.get("content"),"error")
            },
            updateComment:function (id){
                let data = new FormData(document.getElementById("fromupcom"));
                swal("假装评论修改成功了!","待会做! 这个商品id为: "+id+"内容为:"+data,"error")
            }
        },
    })

</script>

<!--弹窗-->

<script>

</script>


<!--背景线条-->
<script src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js" type="text/javascript"></script>
　
<!--右键出字体-->
<script src="../adminjs/bg.js"></script>
　<script src="js/header-new.js"></script>
<script>
    let vn = new Vue({
        el:"#h-new"
        ,data:{
            u:[]
        },
        created:function (){
            axios.get("/mall/getUser").then(function (response) {
                vn.u = response.data;
            })
        }
    })
</script>
<!--引入动态背景js文件-->
<!--<script src="../bgjs2.js"></script>-->
</body>
</html>
